<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            body{
                font: 12px "simhei", Arial, Helvetica, sans-serif;
                color: #666;
            }
            body>div{/*设置整个块级的布局*/
                width: 1000px;
                background-color: pink;
                /*块级元素居中*/
                margin: 0 auto;
            }
            #t_div>div,#b_l_div,#b_r_div>div{/*设置全部的背景颜色*/
                background-color: #E8E8E8;
            }

            /*上边图*/
            #t_l_div{
                width: 611px;
                height: 376px;
                float: left;
            }/*设置左上角块级的属性*/
            #t_r_div{
                width: 375px;
                height: 376px;
                float: right;

            }/*设置右上角块级的属性*/
            #t_div{
                overflow: hidden;
                margin-bottom:10px ;
            }/*解决高度为0的问题*/
            #t_l_div1{
                width: 245px;
                height: 36px;
                text-align: center;
                display: block;
                color: #333333;
                font-size: 32px;
                margin-bottom: 12px;
            }/*第一个p段落*/
            #t_l_div2{
                color: #666;
            }/*第二个p段落*/
            #t_l_div3{
                color: #0aa1ed;
                font-size: 24px;
                font-weight: bold;
                margin-bottom: 12px;
            }/*第三个p段落*/
            #t_l_div>img{
                width: 318px;
                height: 319px;
                position: absolute;

            }/*左上角的图片*/

            /*下边图*/
            #b_l_div{
                width: 366px;
                height: 233px;
                float: left;
            }
            #b_div{
                overflow: hidden;/*解决高度为0异常*/
            }
            #b_r_div>div{
                width: 198px;
                height: 233px;
                float: right;
                margin-left: 10px;
            }



        </style>
    </head>
    <body>
        <div>
            <div id="t_div"><!--上边布局-->
                <div id="t_l_div"><!--左上角-->

                    <p id="t_l_div1">灵越 燃7000系列</p>
                    <p id="t_l_div2">酷睿双核i5处理器|256GB SSD| 8GB内存<br>
                        英特尔HD显卡620含共享显卡内存</p>
                    <p id="t_l_div3">￥4999.00</p>
                    <img src="http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_computer_img1.png" alt="">
                    <a href="http://doc.canglaoshi.org/tstore_v1/web/product_details.html">查看详情</a>

                </div>
                <div id="t_r_div"><!--右上角-->
                    <p></p>
                    <p></p>
                    <a href=""></a>
                </div>
            </div>

            <div id="b_div"><!--下边布局-->
                <div id="b_l_div"></div>
                <div id="b_r_div">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
        </div>
    </body>
</html>